<template>
	<view>
		<view class="container">
			<image class="m-backdrop" src="../../static/icon/icon_back2.png" mode="widthFix"></image>
			<view class="p30">
				<view class="offline_course">
					<navigator class="item mb40" url="#" hover-class="none" v-for="(item,index) in offlineCourseLists" :key="item.id">
						<view class="img-box pr mb25">
							<image :src="item.course_image" mode="aspectFill"></image>
							<view class="tc fs20 col-f" :class="(item.state==1 || item.state==2)? 'status1' : 'status2'">{{item.state_text}}</view>
						</view>
						<view class="mb25 fs28 col-black fwb m-ellipsis">{{item.course_name}}</view>
						<view class="flex-box mb25">
							<view class="g-price1 flex-1 fwb">{{item.course_salesprice}}</view>
							<image class="icon1 mr10" src="/static/icon/icon_already.png" mode="aspectFit"></image>
							<view class="fs22 col-9">已报名{{item.offline_course.enroll_count}}人 | 剩余{{item.offline_course.total_count}}人</view>
						</view>
						<view class="flex-box mb25">
							<image class="icon1 mr20" src="/static/icon/icon_time1.png" mode="aspectFit"></image>
							<view class="fs26 col-3 flex-1">开课时间：{{item.course_start_time_text}} 至 {{item.course_end_time_text}}</view>
						</view>
						<view class="flex-box">
							<image class="icon1 mr20" src="/static/icon/icon_location.png" mode="aspectFit"></image>
							<view class="fs26 col-3 flex-1">开课地点：{{item.course_address}}</view>
						</view>
					</navigator>
					<view class="g-btn3-wrap">
						<view class="g-btn3"  :class="{nomore: offlineCourseListsMore.nomore == true || offlineCourseListsMore.loading == true}" @click="fetchOfflineCourse">{{offlineCourseListsMore.text}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('@/xiluedu/util.js');
export default {
	data() {
		return {
			offlineCourseLists:[],
			offlineCourseListsMore:{page:1}
		};
	},
	onLoad() {
		this.fetch();
	},
	methods: {
		//线下
		fetch() {
		    util.fetch(this, 'xiluedu.offline_order/offline_orders', {pagesize:10}, 'offlineCourseListsMore', 'offlineCourseLists', 'data', list=>{
		    });
		},
		
	}
};
</script>

<style scoped>
.offline_course {
	background-color: #fff;
	border-radius: 10rpx 10rpx 0 0;
}
.offline_course .item {
	width: 690rpx;
}
.offline_course .img-box {
	width: 690rpx;
	height: 360rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.offline_course .img-box image {
	display: block;
	width: 690rpx;
	height: 360rpx;
	border-radius: 10rpx;
}
.offline_course .img-box .status1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 76rpx;
	height: 34rpx;
	border-radius: 10rpx 0 0 0;
	line-height: 34rpx;
	background: linear-gradient(90deg, #d7aa4e, #f4c972);
}
.offline_course .img-box .status2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 76rpx;
	height: 34rpx;
	border-radius: 10rpx 0 0 0;
	line-height: 34rpx;
	background: #d8d8d8;
}
.offline_course .icon1 {
	display: block;
	width: 30rpx;
	height: 30rpx;
}
</style>
